<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>个人零钱理财</title>
  <!--    &lt;!&ndash;引入vue&ndash;&gt;-->
  <!--    <script type="text/javascript" src="../../js/vue.js"></script>-->
  <!--    &lt;!&ndash; 引入样式 &ndash;&gt;-->
  <!--    <link rel="stylesheet" href="../../css/element.css">-->
  <!--    &lt;!&ndash; 引入组件库 &ndash;&gt;-->
  <!--    <script src="../../element-ui/lib/index.js"></script>-->
  <!--    <script type="text/javascript" src="../../js/axios.js"></script>-->

  <!--引入 element-ui 的样式，-->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 必须先引入vue，  后使用element-ui -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  <!-- 引入element 的组件库-->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item><a @click="cut('Main')">首页</a></el-breadcrumb-item>
    <el-breadcrumb-item><a @click="cut('Money')">个人理财</a></el-breadcrumb-item>
    <el-breadcrumb-item><a @click="cut('ChangeMoney')">零钱理财</a></el-breadcrumb-item>
  </el-breadcrumb>
  <h2><span>零钱理财推荐</span></h2>
  <hr>
  <!--    <table class="table" border="1" style="background-color: white" id="tab">-->
  <!--        <thead>-->
  <!--        <tr style="background-color: #26BABD">-->
  <!--            <th>序号</th>-->
  <!--            <th>产品名称</th>-->
  <!--            <th>七日年收化收益率</th>-->
  <!--            <th>每万元收益</th>-->
  <!--            <th>投资期限</th>-->
  <!--            <th>投资金额</th>-->
  <!--            <th colspan="2">相关操作</th>-->
  <!--        </tr>-->
  <!--        </thead>-->
  <!--        <tbody>-->
  <!--        <tr th:each="a:${list}" style="background-color: whitesmoke">-->
  <!--            <td th:text="${a.c_id}"></td>-->
  <!--            <td th:text="${a.c_name}"></td>-->
  <!--            <td th:text="${a.c_yield+'%'}"></td>-->
  <!--            <td th:text="${a.c_earnings+'%'}"></td>-->
  <!--            <td th:text="${a.investmentHorizon.h_day}"></td>-->
  <!--            <td th:text="${a.c_amount+'元'}"></td>-->
  <!--            <td colspan="2">-->
  <!--                <button type="button" onclick="Tou()" style="background-color: aqua">$ 投资</button>-->
  <!--            </td>-->
  <!--        </tr>-->
  <!--        </tbody>-->
  <!--    </table>-->

  <el-table
          :data="list"
          stripe
          style="width: 100%">
    <el-table-column
            prop="c_id"
            label="序号"
            width="180">
    </el-table-column>
    <el-table-column
            prop="c_name"
            label="产品名称"
            width="180">
    </el-table-column>
    <el-table-column
            prop="c_yield"
            label="七日年收化收益率">
    </el-table-column>
    <el-table-column
            prop="c_earnings"
            label="每万元收益">
    </el-table-column>
    <el-table-column
            prop="investmentHorizon.h_day"
            label="投资期限">
    </el-table-column>
    <el-table-column
            prop="c_amount"
            label="投资金额">
    </el-table-column>
  </el-table>


  <!--  <el-card>-->
  <!--    <div slot="header" class="clearfix">-->
  <!--      <span>卡片名称</span>-->
  <!--      <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
  <!--    </div>-->
  <!--    <div class="text item">-->
  <!--      <el-row :gutter="20">-->
  <!--        <el-col :span="12">-->
  <!--          <el-input placeholder="请输入内容">-->
  <!--            <el-button slot="append" icon="el-icon-search"></el-button>-->
  <!--          </el-input>-->
  <!--        </el-col>-->
  <!--        <el-col :span="4">-->
  <!--          <el-button type="primary">添加用户</el-button>-->
  <!--        </el-col>-->
  <!--      </el-row>-->
  <!--    </div>-->
  <!--  </el-card>-->

</div>
</body>
<style>
  .el-breadcrumb{
    margin-bottom: 15px;
    font-size: 12px;
  }
  .el-card{
    box-shadow: 0 1px 1px rgba(0,0,0,0.15) !important;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
</style>

<script>
  let app = new Vue({
    el: '#app',
    name: 'ChangeMoney',
    data() {
      return{
        list: [],
      }
    },
    created () {
      axios({
        url: '/selectChange',
      }).then(res => {
        console.log(res.data);
        this.list = res.data.list;
      });
    },
    methods: {
      cut(path){
        window.parent.cut(path);
      }
    }
  });
  // window.onload=function()//用window的onload事件，窗体加载完毕的时候
  // {
  //     console.log("jin");
  //     $.ajax({
  //               type: "GET",
  //               url: "",
  //               data: $("#tab").serialize(),
  //               dataType: "JSON",
  //               success: function (data) {
  //                   console.log(data.list);
  //                   window.location.href = "views/ChangeMoney";
  //               }
  //             })
  // }
</script>
</html>